<template>
    <view class="relative full-screen">
        <uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="white" @clickLeft="goBack">
            <template v-slot:left>
                <image class="size-32" src="@/static/svg/icon-back.svg" />
            </template>
            <view class="flex center w-full fs-16 text-black text-color-regular">团员列表</view>
        </uni-nav-bar>
        <view class="py-12" :style="{ height: `calc(100vh - ${navBarHeight || 0}px)` }">
            <view class="flex justify-between px-16 mb-8">
                <view class="c3-6 fs-12">参团人员</view>
                <view class="c3-6 fs-12">参团时间</view>
            </view>
            <view class="px-16">
                <view v-for="(item, i) in dataList" :key="i"
                    class="flex justify-between item-center flex-wrap uni-bg-white radius-8 px-12 py-8 mb-12">
                    <view class="flex item-center">
                        <view class="mr-8" style="position: relative;">
                            <badge :show="!!item.groupLead">
                                <image class="w-44 h-44 round" :src="item.avatar" style="border: 0.5px solid #fff;">
                                </image>
                            </badge>
                        </view>
                        <text class="fs-14 c3">{{ item.nickName }}</text>
                    </view>
                    <view class="c3-6">
                        {{ item.createTime }}
                    </view>
                    <view v-if="item.enrollInfos.length" class="w-full mt-12 pt-12 c3-6 relative"
                        style="border-top: 1px dashed; border-color: rgba(51,51,51,0.4);">
                        <view class="fs-10 absolute w-full flex justify-center" style="top: -8px; left: 0;">
                            <text class="px-12" style="background-color: white;">报名信息</text>
                        </view>
                        <view class="fs-12 flex justify-between flex-wrap">
                            <view v-for="(enrollInfoItem, enrollInfoItemInd) in item.enrollInfos"
                                :key="enrollInfoItemInd" class="mb-8"
                                :class="{ 'text-right': enrollInfoItemInd % 2 === 1 }" style="flex:1 1 50%">
                                {{ `${enrollInfoItem.title}: ${enrollInfoItem.value}` }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup name="MyActivity">
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref, computed, onBeforeUnmount } from 'vue'
import { getGroupBuyMembersApi } from '@/api/order.js'
import Badge from '../components/badge/badge.vue'


const deviceBack = ref(true) // 设备返回键或屏幕左滑返回
const goBack = () => {
    deviceBack.value = false
    const pages = getCurrentPages()
    console.log('点击返回', from.value, pages)
    const num = pages.length // 当前页面栈总数
    let backNum // 需要返回的页数
    for (let i = 0; i < num; i++) {
        if (pages[i].route === 'pagesG/order/view-group-buy-members') {
            backNum = num - i - 1
            break
        }
    }
    console.log('需要返回的页面数', backNum)
    uni.navigateBack({
        delta: backNum
    })
}
const from = ref('')

onBeforeUnmount(() => {
    console.log('页面关闭', deviceBack.value, from.value)
    if (deviceBack.value) {
        goBack()
    }
})

const navBar = ref(null)
const navBarHeight = computed(() => {
    const statusBarHeight = uni.getWindowInfo().statusBarHeight
    const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
    return navigationBarHeight
})

const id = ref();
const groupBuyOrderId = ref();
const dataList = ref([])

const getMembers = () => {
    getGroupBuyMembersApi({ groupBuyOrderId: groupBuyOrderId.value }).then(res => {
        dataList.value = res;
    }).catch(err => console.log(err))
};

onLoad((options) => {
    id.value = options.id
    groupBuyOrderId.value = options.groupBuyOrderId;
    getMembers();
})

</script>
